<template>
    <div class="conrtactlist">
        <div class="iconfont icon-zuo1 goback" @click="$router.go(-1)"></div>
        <div class="xshy"><span>线上合约</span> <span class="delectdd" @click="ddd">取消当前订单</span></div>

        <div class="line ">
            <span class="infoleft">姓名</span>
            <div class="oderinfo">
                <span style="margin-right: 20px">{{this.orderinfo.user.real_name}}</span>
                <span>{{this.orderinfo.user.sex ?'男' :'女'}}</span>
            </div>
        </div>
        <div class="line ">
            <span class="infoleft">身份证</span>
            <div class="oderinfo">
                <span style="margin-right: 20px">{{this.orderinfo.user.idcard}}</span>

            </div>
        </div>
        <div class="line ">
            <span class="infoleft">期限</span>
            <div class="oderinfo">
                <span style="margin-right: 20px">
                     <span ref="begin_time" style="margin-right: 5px;">{{ new Date().setTime(ts) | moment('YYYY-M-D')}}</span>至
                    <span style="margin-right: 5px;" ref="end_time">{{ new Date().setTime(ts) | moment("add", `${yuefen} months`,'YYYY-M-D') }}</span>
                </span>

            </div>
        </div>
        <div class="line ">
            <span class="infoleft">月数</span>
            <div class="oderinfo"> <button @click="sub">-</button>
                <span>{{yuefen}}个月</span>
                <button @click="ad" >+</button></div>
        </div>
        <div class="line ">
            <span class="infoleft">月租</span>
            <div class="oderinfo">
                <span >{{yuezu}}</span><span>元</span>
                <span style="margin-left:40px;color:#e1e1e1;margin-right: 20px">定金</span><span>{{yuezu}}元</span>
            </div>
        </div>
        <div class="line ">
            <span class="infoleft">交租日</span>
            <div class="oderinfo">
                <span style="margin-right: 10px">{{orderinfo.house.pay_time}}</span>
                <span>号</span>
            </div>
        </div>
        <div class="line ">
            <span class="infoleft">租约</span>
            <div class="oderinfo">
                <span style="margin-right: 20px">{{orderinfo.house.paytype}}</span>

            </div>
        </div>
        <div class="btn" @click="paymoney">签订合同并付款</div>
        <div style="text-align: center;font-size: 12px;color:#ccc;margin-top: 10px">请确定信息无误后再付款</div>
        <div style="clear: both"></div>
        <md-dialog
                title="提示"
                :closable="false"
                v-model="actDialog.open"
                :btns="actDialog.btns"
        >
            您有订单未完成，请前往完善或取消
        </md-dialog>
    </div>

</template>

<script>
import '@/css/contract_list.css';
import { Toast } from 'mint-ui';
import { Dialog, Button } from 'mand-mobile';

export default {
  name: 'contract_list',
  components: {
    [Dialog.name]: Dialog,
    [Button.name]: Button,
  },
  data() {
    return {
      orderinfo: [],
      orderid: [],
      dingjin: 0.00,
      yuezu: 0.00,
      rid: 0,
      first_time: 0,
      last_time: 0,
      yuefen: 1,
      ts: new Date().getTime(),
      actDialog: {
        open: false,
        btns: [
          {
            text: '取消',
            handler: this.onActCancel,
          },
          {
            text: '确认',
            handler: this.onActConfirm,
          },
        ],
      },
    };
  },
  methods: {
    // 确认支付,提交订单
    async paymoney() {
      const _res = await this.$api.post('/user/getit', {
        order_id: this.orderinfo.order_id,
        first_time: this.$refs.begin_time.innerText,
        last_time: this.$refs.end_time.innerText,
        owe: this.yuezu,

      });
      if (_res.data.state) {
        Toast({
          message: '签约成功',
        });
        // 跳转到下一个页面 支付页面
        setTimeout(() => this.$router.push({ name: 'pay' }));
      } else {
        Toast({
          message: `签约失败${_res.data.data.info}`,
        });
      }
    },
    ad() {
      this.yuefen = this.yuefen + 1;
      console.log(this.yuefen);
    },
    sub() {
      this.yuefen = this.yuefen <= 1 ? 1 : this.yuefen - 1;
      console.log(this.yuefen);
    },
    onActCancelset() { /* 取消删除订单 */
      this.actDialog.open = false;
    },
    async onActConfirmset() { /* 确认删除订单 */
      const _res = await this.$api.post('/user/delorder', {
        uid: this.$store.state.userinfo.uid,
        order_id: this.orderinfo.order_id,
      });
      if (_res.data.state) {
        Toast({
          message: `删除订单成功${_res.data.info}`,
        });
      }
    },
    ddd() { /* 删除订单 */
      this.actDialog.open = true;
    },

  },

  async created() {
    // 通过uid 获取没有完成的订单当中的Hid
    const res = await this.$api.post('/user/getorderbyId', {
      uid: this.$store.state.userinfo.uid,
    });
    console.log(res);
    if (res.data.state) {
      this.orderinfo = res.data.data;
      /* this.orderid=this.orderinfo.order_id; */
      if (this.orderinfo.roomid) {
        this.yuezu = this.orderinfo.room.pay;
      } else {
        this.yuezu = this.orderinfo.house.z_pay;
      }
    } else {

    }
    // 获取时间
    /* let _d = new Date();
            this.first_time = `${_d.getFullYear()}-${_d.getMonth() + 1}-${_d.getDate()} `;
            console.log(this.first_time);

            let _e = new Date();
            _e.setMonth(_e.getMonth() + parseInt(this.numMonth()));
            this.last_time = `${_e.getFullYear()}-${_e.getMonth() + 1}-${_e.getDate()} `;
            console.log(last_time); */
  },

};


</script>

<style  lang="scss" scoped>
    @import '@/css/public.scss';
    .conrtactlist{
        height: 100%;
        body{
            color:#333;
        }

        .goback{
            color:#ffd03b;
            margin-top: vw(20);
            margin-left: vw(20);
            font-size: vw(25);
        }
        .xshy{
            display: inline-block;
            padding-right: vw(15);
            padding-left: vw(15);
            color:#ffd03b;
            font-size:vw(45);
            margin-top: vw(20);
            text-align: left;
        }
        .delectdd{
            display: inline-block;
            height: vw(30);
            padding: 0 vw(15);
            margin-left: vw(30);
            line-height: vw(30);
            font-size: vw(16);
            color: white;
            background: $public-color;
            border-radius: vw(10);
        }
        .line{
            width: vw(350);
            margin: vw(20) auto 0;
            height: vw(30);
            display: flex;
            justify-content: space-around;
            .oderinfo{
                width: vw(280);
                height:vw(30) ;
                line-height: vw(30);
                border-bottom: 1px solid #e1e1e1;
                display: inline-block;
                padding-left: vw(10);

            }
            .infoleft{
                font-size: 17px;
                color:#ccc;
                line-height: vw(30);
            }
        }

        .btn{
            width:vw(330);
            height: vw(50);
            background: #ffd03b;
            margin: vw(50) auto 0;
            border-radius: vw(10);
            font-size: vw(20);
            color:#fff;
            line-height: vw(50);
            text-align: center;
        }
        button{
            margin: 0 vw(10);
            background-color: #fff;
            border:1px solid #778899;
            width: vw(20);
            height: vw(20);
            line-height: vw(20);
            color: #778899;
            text-align: center;
            display: inline-block;
        }

    }
</style>
